<!doctype html>
<html>
<head>
	<style>
	body {
		text-align: center;
	}
	#contaienr {
		font-size: 20px;
		text-align: center;
		display: inline-block;
		min-width: 100px;
		min-height: 40px;
		line-height: 40px;
		border: 1px solid #ccc;
		padding: 10px;
	}
	</style>
	<script>
		// 1.改变div内容
		function changeDivContent() {
			document.getElementById('contaienr').innerHTML = 'hello world';
		}

		// 2.div内容设为现在的时间
		function setDivNow() {
			var date    = new Date();
			var h = date.getHours();
			var m = date.getMinutes();
			var s = date.getSeconds();

			h = h < 10 ? '0' + h : h;
			m = m < 10 ? '0' + m : m;
			s = s < 10 ? '0' + s : s;

			document.getElementById('contaienr').innerHTML = h + ':' + m + ':' + s;
		}

		// 3.制作电子时钟
		function setClock() {
			window.setInterval(setDivNow, 100);
		}

	</script>
</head>
<body onload="setClock()">
	<div id="contaienr">TIME</div>
</body>
</html>